<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 评论列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-select v-model="getCommentData['status']" placeholder="选择状态" class="handle-select mr10">
                    <el-option key="0" label="全部" value="0"></el-option>
                    <el-option key="1" label="正常" value="1"></el-option>
                    <el-option key="2" label="待审核" value="2"></el-option>
                </el-select>
                <el-select v-model="getCommentData['sort']" placeholder="排序" class="handle-select mr10">
                    <el-option key="1" label="ID升序" value="idAsc"></el-option>
                    <el-option key="2" label="ID倒序" value="idDesc"></el-option>
                    <el-option key="3" label="子评论数升序" value="replyNumAsc"></el-option>
                    <el-option key="4" label="子评论数倒序" value="replyNumDesc"></el-option>
                    <el-option key="5" label="点赞数升序" value="likeNumAsc"></el-option>
                    <el-option key="6" label="点赞数倒序" value="likeNumDesc"></el-option>
                </el-select>
                <el-input v-model="getCommentData['content']" placeholder="输入评论内容(模糊)" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            </div>
            <el-table :data="commentList" border class="table" ref="multipleTable">
                <el-table-column prop="CommentId" label="ID" width="120">
                </el-table-column>
                <el-table-column label="用户头像" sortable width="150" align="center">
                    <template slot-scope="scope">
                        <img :src="scope.row.Avatar" alt="" srcset="" class="user-head">
                    </template>
                </el-table-column>
                <el-table-column prop="Nickname" label="用户昵称" width="120">
                </el-table-column>
                <el-table-column prop="Content" label="发帖内容" width="120">
                </el-table-column>
                <el-table-column label="图片/视频" align="center" width="300px">
                    <template slot-scope="scope">
                        <div v-if="scope.row.Image" class="source-box">
                            <img :src="scope.row.Image" alt="" class="source">
                        </div>
                        <div v-if="scope.row.Videos" class="source-box">
                            <video :src="scope.row['Video']" class="source" controls></video>
                        </div>
                        <div v-if="!scope.row.Video&&!scope.row.Image">
                            <h5>没有图片/视频</h5>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="CreateTime" label="发布时间">
                </el-table-column>
                <el-table-column prop="LikeNum" label="点赞数">
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="commentCount">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import { getCommentList } from '../../api/comment';
    export default {
        name: 'basetable',
        data() {
            return {
                commentList:[],
                commentCount:0,
                select_cate: '',
                select_word: '',
                getCommentData:{
                    Page:1,
                    PageSize:10,
                    commentId:0,
                    fromUserId:0,
                    content:'',
                    status:'',
                    isDel:'',
                    sort:'',
                    postId:''
                }
            }
        },
        created() {
            this.getData();
        },
        methods: {
            // 分页导航
            handleCurrentChange(val) {
                this.getCommentData.Page = val;
                this.getData();
            },
            // 获取 easy-mock 的模拟数据
            getData() {
                getCommentList(this.getCommentData).then((res) => {
                    if(res.flag=="1"){
                        this.commentList = res.data.Results;
                        this.commentCount = res.data.TotalCount;
                    }else{
                        this.$message({
                            message:err.msg,
                            type:"error"
                        });
                    }
                }).catch(err=>{
                    this.$message({
                        message:err.msg,
                        type:"error"
                    });
                });
            },
            search() {
                this.getData();
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
        }
    }

</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
    .mr10{
        margin-right: 10px;
    }
    .source-box{
        width: 300px;
        height: 150px;
    }
    .source{
        margin:o auto;
        height: 100%;
    }
    .user-head{
        width: 60px;
        height: 60px;
    }
</style>
